<template>
  <view class="container">
    <view class="integral-wrap">
      <view
        v-for="(item, index) in integralList"
        :key="index"
        class="integral-item"
      >
        <view class="integral-item__title">{{item.date}}</view>
        <view class="integral-item__detail">
          <view
            v-for="(detailItem, index) in item.integralDetailList"
            :key="index"
            class="detail-item"
          >
            <view class="detail-item__title">{{detailItem.date}}</view>
            <view class="df jc-sb ai-c detail-item__cell">
              <view class="detail-item__cell-left">{{detailItem.desc}}</view>
              <view
                :style="themeStyles.textMainColor"
                class="detail-item-cell__right"
              >
                {{integralType.integralType === 1 ? '+' : '-'}}
                {{detailItem.integralNum}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      integralList: [
        {
          date: "2020-05-06",
          integralDetailList: [
            {
              date: "11：37：56",
              desc: "购买商品，消费299.58元。",
              integralNum: "299",
              integralType: 1
            },
            {
              date: "11：37：56",
              desc: "购买商品，消费299.58元。",
              integralNum: "299",
              integralType: 0
            }
          ]
        },
        {
          date: "2020-05-05",
          integralDetailList: [
            {
              date: "11：37：56",
              desc: "购买商品，消费299.58元。",
              integralNum: "299",
              integralType: 1
            }
          ]
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.integral-wrap {
  margin: 0 24rpx;
  .integral-item {
    margin-top: 40rpx;

    &__title {
      font-size: $theme-size-large-base;
      color: $theme-color-main-base;
      font-weight: 500;
    }

    &__detail {
      margin-top: 24rpx;
      border-radius: 16rpx;
      box-shadow: 0 0 14rpx 0 rgba(204, 204, 204, 0.5);
      overflow: hidden;
      background-color: $theme-panel-bg-color;

      .detail-item {
        margin-top: 40rpx;
        padding: 0 24rpx 40rpx;
        &__title {
          color: $theme-color-main-base;
          font-size: $theme-size-base;
        }

        &__cell {
          margin-top: 20rpx;
          .detail-item__cell-left {
            color: $theme-color-base;
            font-size: $theme-size-base;
          }

          .detail-item__cell-right {
            font-size: $theme-size-large-base;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>